<template>
  <div class="content">
    <div class="title">
      我的个人中心
    </div>
    <div class="row1">
      <div class="label">
        头像：
      </div>
      <div class="touxiangbox">
        <div class="touimg" @click="xuantupian">
          <img :src="form.headImg" alt="">
        </div>
        <i class="el-icon-arrow-right"></i>
      </div>
       <input type="file" ref="fileInput" style="display: none" @change="handleFileUpload"/>
    </div>
    <div class="row1">
      <div class="label">
        昵称：
      </div>
      <div class="inputbox">
        <el-input style="width: 240px;" v-model="form.nickname" placeholder="请输入"></el-input>
      </div>
    </div>
    <div class="row1">
      <div class="label">
        电话：
      </div>
      <div class="inputbox">
         <el-input style="width: 240px;" v-model="form.customerPhone" placeholder="请输入"></el-input>
      </div>
    </div>
    <!-- <div class="row1">
      <div class="label">
        ID：
      </div>
      <div class="info">
        8595059505
      </div>
    </div> -->
    <div class="row1">
      <div class="label">
        国家/地区：
      </div>
      <div class="info">
        中国
      </div>
    </div>
    <div class="btnsrow">
      <el-button class="btns" type="primary" @click="tijiao">保存</el-button>
    </div>
    
  </div>
</template>

<script>
import { getuserinfo,updateuserinfo,upToken } from "@/api/user.js";
import axios from 'axios'
export default {
  name: "setting",//个人中心 
  data() {
    return {
      form:{
        nickname:'',//昵称
        headImg:'https://picsum.photos/40/40'
      },
      qiniuToken:'',//七牛token
      realmName:'https://tiyuqiniu.ujiol.com/'
    };
  },
  mounted() {
    this.init()
  },
  beforeDestroy() {
    
  },
  methods: {
    xuantupian(){
       this.$refs.fileInput.click();
    },
    handleFileUpload(event) {
      const file = event.target.files[0];
      if (file) {
        this.uploadFile(file);
      }
    },
    uploadFile(file) {
      // 这里可以添加文件上传的逻辑，例如使用FormData发送到服务器
      const formData = new FormData();
      formData.append('file', file);
      formData.append('token', this.qiniuToken);
      formData.append('bucket', "tiyulife");
      formData.append('key', Date.now() + "_" + file.name);
      
      // 使用axios或fetch发送数据到服务器
      // 例如使用axios:
      axios.post('https://up-z1.qiniup.com', formData, {
        headers: {
          'Content-Type': 'multipart/form-data'
        }
      }).then(response => {
        console.log('文件上传成功', response);
        var key = response.data
							var url = this.realmName + key.key
        this.$set(this.form,'headImg', url)
      }).catch(error => {
        console.error('文件上传失败', error);
      });
    },
    tijiao(){
      if(!this.form.nickname){
        this.$message.error('请输入昵称')
        return
      }
      if(!this.form.customerPhone){
        this.$message.error('请输入电话')
        return 
      }
      if(!this.form.headImg){
        this.$message.error('请上传头像')
        return 
      }
      if(this.form.customerPhone.length!=11){
        this.$message.error('请输入正确的手机号')
        return 
      }
      
      updateuserinfo({
        openid:this.form.openid,
        	nickname:this.form.nickname,
				headImg:this.form.headImg,
				// deptId:this.$appInfo.deptId,
      }).then(res=>{
        console.log(res)
        this.init()
      })
    },
    async init(){
      getuserinfo({customerId:this.$store.state.user.customerId}).then(res=>{
        console.log(res)
        this.form=res.data.crCustomer;
      })  
      upToken({bucket:'tiyulife'}).then(res=>{
        console.log(res)
        this.qiniuToken=res.msg;
      })
    }
  },
  
};
</script>
<style scoped lang="scss">
.content{
  padding: 16px;
  box-sizing: border-box;
  .title{
    font-weight: bold;
    font-size: 24px;
    color: #333333;
    line-height: 36px;
    text-align: left;
    margin-bottom: 16px;
  }
  .row1{
    margin-bottom: 40px;
    display: flex;
    align-items: center;
    .label{
      width: 90px;
      font-weight: 400;
      font-size: 16px;
      color: #4F4F4F;
      text-align: right;
      margin-right: 8px;
    }
    .touxiangbox{
      display: flex;
      align-items: center;
      justify-content: space-between;
      width: 240px;
      .touimg{
        width: 40px;
        height: 40px;
        border-radius: 50%;
        overflow: hidden;
        img{
          width: 100%;
          height: 100%;
          object-fit: cover;
        }
      }

    }
    .inputbox{
      max-width: 240px;
    }
    .info{
      font-weight: 400;
      font-size: 16px;
      color: #4F4F4F;
      text-align: left;
    }
  }
  .btnsrow{
    margin-left: 128px;
    width: 80px;
    height: 35px;
    border-radius: 8px 8px 8px 8px;
    padding: 0;
  }
}
</style>
